<template>
  <div>
    <div class="info">
      <div>
        <div class="title">处理过程设置</div>
        <div class="desc">设置待遇处理模板重点流程</div>
      </div>
      <a-button type="primary" @click="addProcessItem">
        <a-icon type="plus"></a-icon>
        添加流程
      </a-button>
    </div>
    <a-divider dashed></a-divider>
    <div style="padding-left: 12px">
      <div v-if="isRendered">
        <ProcessItem
          v-for="(li, idx) in processes"
          :key="`${li.name}_${idx}`"
          :dataSource="li"
          :index="idx"
          :isEnd="idx === processes.length - 1"
          @updateItem="onUpdateItem"
          @delItem="delProcessItem"
          @editItem="editProcessItem"
        />
      </div>
      <div class="addPes" @click="addProcessItem">
        <a-icon type="plus-circle" style="margin-right: 12px" />
        添加流程
      </div>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" @ok="handleOk">
      <a-input v-model="nameNew" placeholder="请输入"></a-input>
    </a-modal>
  </div>
</template>
<script>
import ProcessItem from "./processItem";
export default {
  name: "",
  components: { ProcessItem },
  mixins: [],
  props: {
    isCreate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isRendered: true,
      processes: [],
      nameNew: "",
      idxEdit: null,
      modalVisible: false,
      tempInfo: null
    };
  },
  computed: {
    modalTitle() {
      return this.idxEdit || this.idxEdit === 0 ? "编辑流程" : "添加流程";
    },
    fieldKey() {
      return this.isCreate ? "formGroupFieldAddList" : "formGroupFieldUpdateList";
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getValues() {
      const children = this.processes.map((item, idx) => ({
        moduleCode: "processChild",
        formType: "dycl",
        subjectType: "site",
        parentId: "0",
        ...item,
        sort: idx + 1,
        moduleName: item.name,
        [`${this.fieldKey}`]: item.fields.map((li, idx_li) => ({
          moduleCode: "processChild",
          subjectType: "site",
          parentId: "0",
          ...li,
          sort: idx_li + 1,
          moduleName: item.name
        }))
      }));
      console.log(children);
      children.forEach((item) => {
        delete item.name;
        delete item.fields;
      });
      children.unshift({
        moduleName: "处理流程",
        moduleCode: "process",
        formType: "dycl",
        subjectType: "site",
        parentId: "0",
        ...this.tempInfo
      });
      return children;
    },
    setValues(initValues) {
      this.$nextTick(() => {
        const temp = { ...initValues.formGroupTree[2] };
        this.processes = temp.childList.map((item) => {
          const itemNew = {
            ...item,
            name: item.moduleName,
            fields: item.formGroupFieldList
          };
          delete itemNew.formGroupFieldList;
          return itemNew;
        });
        delete temp.childList;
        this.tempInfo = temp;
      });
    },
    onUpdateItem(idx, item) {
      const tempLst = [...this.processes];
      tempLst[idx] = {
        ...tempLst[idx],
        ...item
      };
      this.updateProcesses(tempLst);
    },
    delProcessItem(idx) {
      const tempLst = [...this.processes];
      tempLst.splice(idx, 1);
      this.updateProcesses(tempLst);
    },
    editProcessItem(idx) {
      this.idxEdit = idx;
      this.nameNew = this.processes[idx].name;
      this.modalVisible = true;
    },
    addProcessItem() {
      this.idxEdit = null;
      this.nameNew = "";
      this.modalVisible = true;
    },
    handleOk() {
      if (this.nameNew) {
        if (this.idxEdit || this.idxEdit === 0) {
          this.onUpdateItem(this.idxEdit, {
            ...this.processes[this.idxEdit],
            name: this.nameNew
          });
        } else {
          const tempLst = [...this.processes];
          tempLst.push({
            name: this.nameNew,
            fields: []
          });
          this.updateProcesses(tempLst);
        }
        this.modalVisible = false;
      }
    },
    updateProcesses(lstNew) {
      this.isRendered = false;
      this.processes = lstNew;
      this.$nextTick(() => {
        this.isRendered = true;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  .title {
    font-size: 16;
    font-weight: 500;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
  }
  .desc {
    margin-top: 4px;
    line-height: 20px;
    color: rgba(156, 156, 156, 1);
  }
}
.addPes {
  display: flex;
  align-items: center;
  color: var(--primary);
  margin-left: -10px;
  cursor: pointer;
  ::v-deep .anticon {
    font-size: 20px;
  }
}
</style>
